{% include 'header.html' %}
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>

<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">量化交易系统</h1>
    <h2 class="text-xl font-bold mt-8 mb-4">回溯测试</h2>
    <form class="layui-form" lay-filter="backtestForm">
        <div class="layui-form-item">
            <label class="layui-form-label">股票代码</label>
            <div class="layui-input-block">
                <input type="text" name="stock" required lay-verify="required" placeholder="请输入股票代码"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开始日期</label>
            <div class="layui-input-block">
                <input type="text" name="start_date" required lay-verify="required"
                       placeholder="请输入开始日期（YYYY-MM-DD）" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束日期</label>
            <div class="layui-input-block">
                <input type="text" name="end_date" required lay-verify="required"
                       placeholder="请输入结束日期（YYYY-MM-DD）" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="backtestTrades">回溯测试</button>
            </div>
        </div>
    </form>
    <div id="backtestResult" class="mt-4 p-4 bg-white rounded shadow">
        <!-- 回溯测试结果将显示在这里 -->
    </div>

    <h2 class="text-xl font-bold mt-8 mb-4">回溯交易列表</h2>
    <table class="layui-table" id="backtestListTable"></table>

    <div id="backtestRecordModal" class="layui-layer" style="display: none;">
        <h2 class="text-xl font-bold mt-4 mb-2">回溯交易记录</h2>
        <table class="layui-table" id="backtestRecordTable"></table>
        <div id="profitChart" style="width: 100%; height: 400px;"></div>
    </div>
</div>

<script>
    layui.use(['form', 'table', 'layer'], function () {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;

        // 监听回溯测试表单提交
        form.on('submit(backtestTrades)', function (data) {
            $.ajax({
                url: '/recalltest/backtest',
                type: 'GET',
                data: data.field,
                success: function (res) {
                    if (res.code === 0) {
                        var backtestTrades = res.backtest_trades;
                        var profit = res.profit.toFixed(2);
                        var resultHtml = `<p>回溯测试利润: <span class="text-green-600 font-bold">${profit}</span></p>`;
                        resultHtml += '<table class="layui-table">';
                        resultHtml += '<thead><tr><th>时间</th><th>交易类型</th><th>数量</th><th>价格</th></tr></thead>';
                        resultHtml += '<tbody>';
                        for (var i = 0; i < backtestTrades.length; i++) {
                            var trade = backtestTrades[i];
                            resultHtml += `<tr><td>${trade.timestamp}</td><td>${trade.type}</td><td>${trade.quantity}</td><td>${trade.price}</td></tr>`;
                        }
                        resultHtml += '</tbody></table>';
                        $('#backtestResult').html(resultHtml);
                        // 重新加载回溯交易列表
                        table.reload('backtestListTable');
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });

        // 渲染回溯交易列表
        table.render({
            elem: '#backtestListTable',
            url: '/recalltest/get_backtest_list',
            cols: [[
                {field: 'stock', title: '股票代码'},
                {field: 'backtest_start', title: '回溯开始日期'},
                {field: 'backtest_end', title: '回溯结束日期'},
                {
                    title: '操作',
                    templet: function (d) {
                        return `
                            <button class="layui-btn layui-btn-sm" onclick="window.parent.location.href='/member?pagename=/recalltest/trade_records&stock=${d.stock}&start_date=${d.backtest_start}&end_date=${d.backtest_end}'">查看交易记录</button>
                            <button class="layui-btn layui-btn-sm" onclick="window.parent.location.href='/member?pagename=/recalltest/profit_chart&stock=${d.stock}&start_date=${d.backtest_start}&end_date=${d.backtest_end}'">查看收益折线图</button>
                        `;
                    }
                }
            ]]
        });
    });
</script>
{% include 'footer.html' %}